.line{
  background:url("../../../src/assets/monitoring/site_list.png") bottom center no-repeat;
  background-size:contain;
}
.monitoring{
  color: #E6F5FF;
  background: #000;
  width: 100%;
  height: 100%;
  h3 {
    display: block;
    width: 1.1rem;
    font-size: 0.16rem;
  }
  a{
    float: right;
    text-decoration:none;
    font-size: .12rem;
    padding-left:.1rem;
  }
  .page_box{
    a{
      padding-left: 0;;
    }
  }
  .photo_list{
    display: none;
  }
  .right_box{
    display: none;
  }
  .left_box{
    width: 2.6rem;
    height: 6.4rem;
    position: absolute;
    top: 0.8rem;
    left: 0.3rem;
    // padding-left: 0.2rem;
    // background:url("../../../src/assets/monitoring/bg.png") top left no-repeat;
    // background-size:contain;
    .ivu-form{
     // height: 0.8rem;
     padding: .12rem 0;
     border-top: 1px solid rgba(0, 249, 252, 0.3);
     border-bottom: 1px solid rgba(0, 249, 252, 0.3);
     position: relative;
     .bottomLine{
       position: absolute;
       width:1.4rem;
       height:2px;
       background:rgba(0, 249, 252, 0.7);
       left:.6rem;
        bottom:-1px;
        &:before{
          content: '';
          position: absolute;
          width:2px;
          height:2px;
          border-radius: 50%;
          background:rgba(0, 249, 252, 0.7);
          left: -0.6rem;
          bottom:0;
       }
       &:after{
         content: '';
         position: absolute;
         width:2px;
         height:2px;
         border-radius: 50%;
         background:rgba(0, 249, 252, 0.7);
         right: -0.6rem;
         bottom:0;
      }
     }
      .ivu-form-item{
        margin: 0.05rem 0;

        button{
          color: #000000;
        }
        .ivu-select-input, .ivu-input{
          line-height: 24px!important;
          height: 24px;
        }
      }
      .ivu-input-wrapper{
        //width: 100% !important;
      }
    }
    .site_box{
      height: 5.25rem;
      margin-top: 0.2rem;
      overflow:auto;
    }
    .page_box{
      .ivu-page-item {
        //background-color: transparent;
        box-shadow: none;
      }
      a{
        float: none;
      }
    }
    .site_list{
      padding: 5px 0;
      //background:url("../../../src/assets/monitoring/site_list.png") bottom center no-repeat;
      //background-size:contain;
      p{
        background:url("../../../static/images/chart_nail.png") center left no-repeat;
        background-size:0.15rem auto;
        padding-left: 0.2rem;
        font-size: 0.14rem;
        line-height: 0.2rem;
        margin-bottom: 0.1rem;
        font-weight: bold;
      }
      ul{
        margin-left: 0.15rem;
      }
      li{
        width: 100%;
        height: 0.2rem;
        font-size: 0.12rem;
        line-height: 0.2rem;
        margin-bottom: 0.1rem;
        i{
          display: block;
          float: left;
          width: 0.2rem;
          height: 0.2rem;
          color: #FC8C0D;
          //background:url("../../../src/assets/monitoring/icon_order.png") center left no-repeat;
          //background-size:contain;
          font-size: 0.2rem;
          line-height: 0.18rem;
          text-align: center;
          font-weight: bold;
          &.active{
            color: #3FF88F;
          }
        }
        a{
          display: block;
          float: left;
          span{
            display: inline-block;
            width: 1.5rem;
            color: #FFF;
            text-decoration:none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &:hover span,&.action span{
            color: #00F9FC;
            text-decoration:underline;
          }
          b{
            float: right;
          }
        }
      }
    }
  }
  .main_box{
    width: 10.9rem;
    height: 6.4rem;
    position: absolute;
    top: 0.8rem;
    left: 3.1rem;
    h3 {
      float: left;
      width: 1.5rem;
      text-align: center;
      line-height: 0.3rem;
      cursor:pointer;
    }
    h3.active{
      color: #49BBFF;
    }
    .menu{
      display: block;
      float: left;
      height: 0.36rem;
      width: 11.2rem;
      position: relative;
      top:-0.07rem;
      li{
        float: left;
        border-radius: .18rem;
        //margin-right:0.15rem;
        //background-color: #113257;
        //border: 1px solid #49bcff;
        padding: 0 0.12rem 0 0.15rem;
        //transform: skew(36deg);
        //-ms-transform: skew(36deg);
        //margin-top: 0.1rem;
        cursor:pointer;
        span{
          display: block;
          font-size: 0.12rem;
          line-height: 0.36rem;
          margin-right: 0.12rem;
          max-width: 1.2rem;
          font-weight: 500;;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          //transform: skew(-36deg);
          //-ms-transform: skew(-36deg);
        }
        b{
          display: block;
          float: right;
          position: relative;
          top: .08rem;
          i.ivu-icon{
            color: #FFF;
          }
        }

      }
      li span:hover{
        //font-weight:bold;
        color: #AFD8F3;
      }
      li.action{
        color: #000;
        background-color: #00F9FC;
        i.ivu-icon,span{
          color: #000;
        }
      }
    }
    .video_box{
      width: 100%;
      height: 5.64rem;
      margin-top: 0;
      margin-bottom: 0.2rem;
      position:relative;
      .mejs__overlay-play{
        display: none;
      }
      object{
        z-index: 1;
        background-color: #333;
      }
    }
    .photo_list{
      width: 8.25rem;
      height: 1.5rem;
      h4{
        width: 100%;
        padding-top: 0.5rem;
        color: #FFF;
        font-size: 0.14rem;
        text-align: center;
      }
      h3{
        display: block;
        float: none;
        width: 100%;
        height: 0.3rem;
        margin: 0.1rem 0;
        font-size: 0.16rem;
        line-height: 0.3rem;
        text-align: left;
        span{
          float: right;
          //width: 1.5rem;
          font-size: 0.12rem;
          line-height: 0.3rem;
          padding-right: .35rem;
        }
        .pageNums{
          font-size: .2rem;
          color: #00F9FC;
          padding: 0 .05rem;
        }
      }
      .ivu-carousel-track{
        margin: 0 auto;
      }
      .ivu-carousel-item{
        ul{
          //margin-left: 0.4rem;
          li{

            display: inline-block;
            margin: 0 0.075rem;
            span{
              display: block;
              width: 0.61rem;
              height: .81rem;
              border: 1px solid #AFD8F3;
              background-position:top left;
              background-repeat: no-repeat;
              background-size:cover;
            }
            p{
              text-align: center;
              font-size: 0.12rem;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
  .right_box{
    width: 3rem;
    height: 6.4rem;
    position: absolute;
    top: 0.8rem;
    right: 0.25rem;
    padding: .2rem .2rem 0 .2rem;
    &>p{
      display: block;
      width: 1rem;
      height: 0.3rem;
      float: right;
      font-size: 0.14rem;
      line-height: 0.3rem;
      a{
        //float: right;
      }
    }
    .targetList_box{
      width: 100%;
      height: 6.5rem;
      overflow-x: hidden;
      overflow-y:auto;
    }
    .target_list{
      width: 100%;
      height: 1.8rem;
      float: left;
      padding: 0.1rem 0.1rem 0.1rem 0.17rem;
      .ivu-row{
        margin-bottom: 0.05rem;
      }
      div.target_box{
        height: 1.2rem;
        ol{
          float: left;
          width: 1.2rem;
          li{
            font-size: 0.12rem;
            line-height: 0.16rem;
          }
        }
        span{
          display: block;
          float: right;
          width: 0.8rem;
          height: 1.1rem;
          background-position:center center;
          background-repeat: no-repeat;
          background-size:contain;
        }
      }
    }
  }
}
.cmenuBox{
  position: relative;
  &>div{
    position: absolute;
    right: 0;
    height: 32px;
    line-height: 32px;
    &>span{font-family: FZSanBTJW_Zhong;}
    &>div{
      display: inline-block;
      margin-right: 0.1rem;
    }
  }
}
.monitoring.faceBox{
  .menu,.cmenuBox,.timeLine_vedio{
    width: 7.3rem;
  }
  .video_box{
    // width: 7.8rem;
    // height: 4.3rem;
    width: 8.25rem;
    height: 5rem;
  }
  .photo_list{
    display: block;
  }
  .right_box{
    display: block;
  }
  .playTime{line-height: 0.24rem;
  }
}
.photoMoreModal .ivu-modal-content{
  width: 8.6rem;
  height: 5rem;
  .ivu-modal-close {
    top: 0.25rem;
    right: 0.25rem;
  }
  .ivu-modal-body{
    width: 85%;
    margin: 0.1rem auto;
    .ivu-form-item {
      margin-bottom: 5px;
      label{
        padding-left: 0.3rem;
        font-size:0.14rem;
      }
    }
    ul{
      li{
        height: 1.9rem;
        display: inline-block;
        margin: 0 0.08rem;
        span{
          display: block;
          width:1.2rem;
          height: 1.6rem;
          border: 2px solid #AFD8F3;
          background-position:top left;
          background-repeat: no-repeat;
          background-size:cover;
        }
        p{
          text-align: center;
          font-size: 0.14rem;
          line-height: 0.25rem;
        }
      }
    }
  }
}
.timeLine_vedio{
  width: 100%;
}
.sliderBox{
  width: 100%;
  height: auto;
  position: relative;
  .slider{
    position: absolute;
    left: 3.1%;
    top: 0;
    z-index: 9;
    width: 93.8%;
    height: 100%;
  }
  .ivu-slider-disabled .ivu-slider-wrap{
    background-color: transparent;
  }
  .ivu-slider-wrap{
    height: 24%;
    margin: 0;
    top: 45%;
    background: transparent;
    .ivu-slider-bar{
      height: 100%;
      background: transparent;
    }
    .ivu-slider-button-wrap{
      top: 50%;
      transform: translate(-8.5px,-7.5px);
      background: transparent;
    }
    .ivu-slider-button{
      width: 16px;
      height: 16px;
      border: 4px solid #c8de45;
      background: transparent;
    }
    .ivu-tooltip-inner{
      color: #fff;
      background: rgba(0,0,0,0.8);
    }
  }
  .playTime{
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    height: 0.2rem;
    line-height: 0.16rem;
  }
}
@media screen and (max-width:1920px) {
  .cmenuBox>div{
    //top:-0.07rem;
  }
}
